<template>
	<view class="home" :style="{paddingTop:headHeight+'px'}" >
		<myhead :background="headBg">
			<u-input style="pointer-events: none;" placeholder-style="color:#fff" class="s-inp f24 pf w500 fff" placeholder="请输入关键词" type="text" :border="true" />
		</myhead>
		<u-swiper :list="slist" height="420" :effect3d="true" ></u-swiper>
		<view class="nav">
			<u-tabs name="name" item-width="360" class="mynav" count="count" active-color="#f50" :is-scroll="true" :list="list" :current="current"  @change="changeCurrent"> </u-tabs>
		</view>
		
		<view class="tlist">
			<navigator class="item" url="" v-for="(l,i) in tlist" :key="i"> 
				<view class="flex">
					<view class="left">
						{{l.name}}
					</view>
					<view class="time">
						{{l.time}}
					</view>
				</view>
				<view class="flex content">
					{{l.desc}}
				</view>
				<view class="flex">
					<view class="hot">
						人气 <u-icon class="icon" name="star-fill"></u-icon> {{l.hot}}
					</view>
					<view>
						点赞 <u-icon  class="icon" name="thumb-up-fill"></u-icon> {{l.like}}
					</view>
				</view>
				<view class="flex">
					<view class="userinfo">
						<image :src="l.userInfo.avatarUrl" class="avatar"></image>
						<text> {{l.userInfo.nickName }}</text>
					</view>
					<view class="">
						收藏 <u-icon  class="icon" name="heart-fill" ></u-icon> {{l.shou}}
					</view>
				</view>
			</navigator>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
const db = wx.cloud.database()
export default {
	data(){
		return {
			current:0,
			status: 'loadmore',
			list:[
				{
					name:"人气题目",
				},
				{
					name:"最新题目",
				}
			],
			slist:[
				{
					image: 'https://uploadfile.huiyi8.com/2014/0705/20140705095647363.jpg.270.jpg',
				},
				{
					image: 'https://img2.baidu.com/it/u=1715711204,566353307&fm=26&fmt=auto',
				}
			],
			page:1,
			limit:10,
			total:0,
			tlist:[]  // 题目列表
		}
	},
	created(){
		db.collection('wh2107timu')
		.where({})
		.count()
		.then(res=>{
			console.log(res)
			this.total = res.total; 
		})
	},
	mounted(){
		this.getTimuList()
	},
	onReachBottom(){
		// 页面滑动到底部
		
		console.log("onReachBottom")
		this.page++;
		console.log(Math.ceil(this.total/this.limit))
		if(this.page> Math.ceil(this.total/this.limit) ){
			uni.showToast({
				title:"数据已经见底了",
				icon:'none'
			})
		}else{
			// 请求第二页数据 
			this.getTimuList(true)
			this.$nextTick(function(){
				uni.showToast({
					title:"加载更多成功",
					icon:'none'
				})
			})
		}
	},
	methods:{
		changeCurrent(index){
			this.current = index;
			this.page = 1;
			this.getTimuList()
		},
		getTimuList(flag){
			db.collection('wh2107timu')
			.orderBy(this.current==0?'hot':'time',"desc")    // desc 降序   人气  hot  最新 time  
			.skip((this.page-1) * this.limit)
			.limit(this.limit)
			.where({})
			.get()
			.then(res=>{
				console.log(res)
				if(flag){
					// 累计合并数据  
					this.tlist = this.tlist.concat(res.data)
				}else{
					this.tlist = res.data 
				}
				
			})
		}
	}
}
</script>

<style lang="scss">
	.home{
		.nav{
			
			padding:0 20rpx;
			width:100%;
			.u-tabs{
				width:100%;
				display: flex;
				justify-content: space-between;
				.u-tab-item{
					flex:1;
					width:50%;
				}
			}
		}
		
		.tlist{
			width:100%;
			padding:30rpx;	
			box-sizing: border-box;
			.item{
				width:100%;
				height:auto;
				padding:30rpx;
				box-shadow: 0 0 5rpx #3F536E;
				margin-top:30rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				.flex{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top:12rpx;
				}
				.content{
					padding: 20rpx 0;
					border-bottom:1rpx solid #eee;
				}
				.userinfo{
					display: flex;
					align-items: center;
				}
				.avatar{
					width:56rpx;
					height:56rpx;
					margin-right:10rpx;
					border-radius: 50%;
				}
				.icon{
					margin:0 5rpx;
				
					color: #f50;
				}
			}
		}
	}
</style>
